import { StyleSheet, Dimensions, Platform } from "react-native";
import { lightTheme } from "@/styles/theme.style";

// 获取屏幕尺寸
const { width, height } = Dimensions.get("window");

// 使用lightTheme的类型作为ThemeColors类型
type ThemeColors = typeof lightTheme;

export const createStyles = (
  colors: ThemeColors,
  selectedMembers: string[] = []
) =>
  StyleSheet.create({
    modalContainer: {
      flex: 1,
      width: "100%",
      height: "100%",
      backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    modalContent: {
      position: "absolute",
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: colors.background,
      borderTopLeftRadius: 16,
      borderTopRightRadius: 16,
      paddingBottom: Platform.OS === "ios" ? 34 : 20,
      maxHeight: height * 0.9,
      minHeight: height * 0.5, // 确保最小高度
    },
    backdrop: {
      flex: 1,
      width: "100%",
    },
    header: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      paddingHorizontal: 16,
      paddingVertical: 16,
      borderBottomWidth: 0.5,
      borderBottomColor: colors.border.divider,
    },
    closeButton: {
      padding: 4,
    },
    title: {
      fontSize: 18,
      fontWeight: "600",
      flex: 1,
      textAlign: "center",
    },
    removeButton: {
      paddingVertical: 8,
      paddingHorizontal: 12,
    },
    removeButtonText: {
      fontSize: 16,
      fontWeight: "500",
      color: colors.status.error,
    },
    disabledButton: {
      opacity: 0.5,
    },
    disabledButtonText: {
      color: colors.text.secondary,
    },
    groupInfo: {
      flexDirection: "row",
      alignItems: "center",
      padding: 16,
      borderBottomWidth: 0.5,
      borderBottomColor: colors.border.divider,
    },
    groupAvatar: {
      backgroundColor: "#E1E1E1",
    },
    groupTextInfo: {
      marginLeft: 16,
      flex: 1,
    },
    groupName: {
      fontSize: 18,
      fontWeight: "600",
      marginBottom: 4,
    },
    groupMemberCount: {
      fontSize: 14,
    },
    selectedCount: {
      paddingHorizontal: 16,
      paddingVertical: 8,
      backgroundColor: colors.background,
      borderBottomWidth: selectedMembers.length > 0 ? 0.5 : 0,
      borderBottomColor: colors.border.divider,
    },
    selectedCountText: {
      fontSize: 14,
    },
    listContainer: {
      flex: 1,
      height: height * 0.5, // 明确设置高度
    },
    selectedPreviewContainer: {
      paddingVertical: 12,
      paddingHorizontal: 16,
      borderBottomWidth: 0.5,
      borderBottomColor: colors.border.divider,
      backgroundColor: colors.background,
    },
    selectedPreviewTitle: {
      fontSize: 14,
      fontWeight: "500",
      marginBottom: 8,
      color: colors.text.secondary,
    },
    selectedPreviewScroll: {
      flexDirection: "row",
    },
    selectedMemberItem: {
      alignItems: "center",
      marginRight: 12,
      width: 60,
    },
    avatarContainer: {
      position: "relative",
      marginBottom: 4,
    },
    selectedMemberAvatar: {
      width: 50,
      height: 50,
      borderRadius: 25,
    },
    selectedMemberName: {
      fontSize: 12,
      textAlign: "center",
      color: colors.text.primary,
      width: 60,
    },
    removeIconContainer: {
      position: "absolute",
      top: -2,
      right: -2,
      backgroundColor: colors.status.error,
      borderRadius: 12,
      width: 22,
      height: 22,
      justifyContent: "center",
      alignItems: "center",
      borderWidth: 2,
      borderColor: colors.background,
      zIndex: 10,
    },
  });
